<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
      .cont p{
		  display: inline;
	  }
    </style>
  </head>
  <body>

    <h1>My shopping list</h1>
    <form>
    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button type="button" onclick="addItem()">Add item</button>
    </div>
   
    <ul>
      <!-- <li><span>12312</span><button type="button" onclick="deleteTheDom()">Delete</button></li> -->
    </ul>
    <div class="cont">
      <span>购物车内的商品有：</span>
      <p id="cotent"></p>
      <button type="button" onclick="removeAll()">清空</button>
    </div>
  </form>
  <script src="NSet.js"></script>
    <script>
      var _contentDom = document.querySelector("#cotent");
      var goodsSet =new NSet();
      var _itemDom = document.querySelector("#item");
      var _ulDom = document.querySelector("ul");
      _itemDom.value = "";

      function addItem(){
          var itemValue = _itemDom.value.trim();
          if(!itemValue){
            alert("请输入值");
            return false;
          }
          var itemValueArr = [];
          if(itemValue.indexOf("#")!=-1){
            itemValueArr = itemValue.split("#").filter(function(vv,ii){
              if(vv){
                return true;
              }
            });
          }else{
            itemValueArr.push(itemValue);
          }
          if(itemValueArr.length==0){
            return false;
          }

          _itemDom.value = "";

          createLiElement(itemValueArr);

      }

      function createLiElement(itemValueArr){
        // var hasChange = false;
        // for(var i=0;i<itemValueArr.length;i++){
        //   if(!goodsSet.has(itemValueArr[i])){
        //     goodsSet.add(itemValueArr[i]);
        //     hasChange = true;
        //   }
        // }
        // if(hasChange){
        //   var content = "";
        //   for(var j=0;j<goodsSet.length;j++){
        //     content+=`<li><span>${goodsSet.get(j)}</span><button type="button" onclick="deleteTheDom(this)">Delete</button></li>`;
        //   }
        //   _ulDom.innerHTML = content;
        //   _contentDom.innerHTML = goodsSet.toString();

        // }
        var content = "";
        for(var i=0;i<itemValueArr.length;i++){
          if(goodsSet.add(itemValueArr[i])){
             content+=`<li><span>${itemValueArr[i]}</span><button type="button" onclick="deleteTheDom(this)">Delete</button></li>`;
          }
        }
        if(content){
          _ulDom.insertAdjacentHTML('beforeend',content);
          _contentDom.innerHTML = goodsSet.toString();
        }
      }

      

      function deleteTheDom(_ob){
        var spanValue = _ob.parentNode.firstChild.firstChild.nodeValue;
        goodsSet.remove(spanValue);
        _ulDom.removeChild(_ob.parentNode);
        _contentDom.innerHTML = goodsSet.toString();
      }

      function removeAll(){
        goodsSet.clear();
        _contentDom.innerHTML ="";
        _ulDom.innerHTML="";
      }

    </script>
  </body>
</html>